<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 273px;
            height: 262px;
            background: url(clock.png);
            margin: 0 auto;
            position: relative;
        }
        .center-point{
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: black;
            position: absolute;
            z-index: 10;
            top: 127px;
            left: 130px;
        }
        #hou{
            width: 50px;
            height: 6px;
            background: red;
            border-radius: 3px;
            position: absolute;
            top: 128px;
            left: 131px;
        }
        #min{
            width: 60px;
            height: 4px;
            background: pink;
            border-radius: 2px;
            position: absolute;
            top: 129px;
            left: 131px;
        }
        #sec{
            width: 70px;
            height: 2px;
            background: green;
            border-radius: 1px;
            position: absolute;
            top: 130px;
            left: 131px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="center-point"></div>
        <div id="hou"></div>
        <div id="min"></div>
        <div id="sec"></div>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var hou = document.getElementById("hou");
            var min = document.getElementById("min");
            var sec = document.getElementById("sec");
            hou.style.transformOrigin = "3px 3px";
            min.style.transformOrigin = "3px 2px";
            sec.style.transformOrigin = "3px 0px";
            function getTime(){
                var date = new Date();
                var h = date.getHours();
                var m = date.getMinutes();
                var s = date.getSeconds();
                hou.style.transform = "rotate("+((h+m/60)*30-90)+"deg)";
                min.style.transform = "rotate("+((m+s/60)*6-90)+"deg)";
                sec.style.transform = "rotate("+(s*6-90)+"deg)";
            }
            getTime();
            setInterval(getTime,1000);

        }


    </script>
</body>
</html>